<!--  -->
<template>
  <div class="container">
    <div class="content-box">
      <div class="back-box">
        <div class="btn-back" @click="goBack">
          <img src="@/assets/img/back.png" alt="" />
          <span>返回</span>
        </div>
        <div class="line"></div>
        <div class="name">学员标签</div>
      </div>

      <div class="select-box">
        <div class="span">标签</div>
        <div class="select-content">
          <el-select
            v-model="value"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              @click.native.stop="tagSelect(item.name, item.id)"
            >
            </el-option>
          </el-select>
        </div>
        <div class="link">标签管理</div>
      </div>

      <div class="footer">
        <button class="el-button el-button--primary" @click="sureClick">
          确认
        </button>
        <button class="el-button el-button--default" @click="goBack">
          取消
        </button>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getMemberCreate } from "@/network/member";
import { changeTags } from "@/network/member";
import { Message } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      options: [],
      value: [],
      id: "",
      params: {
        id: "",
      },
      tagsParams: {
        tag_ids: [],
        id: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBack: function () {
      this.$router.go(-1);
    },
    async created1() {
      let res = await getMemberCreate();
      if (res.data.tags != null) {
        this.options = res.data.tags;
      }
      //   console.log(this.options);
    },
    async created2() {
      const len = location.href.split("/").length - 2;
      this.id = location.href.split("/")[len];
      this.tagsParams.id = this.id;
      let res2 = await changeTags(this.tagsParams);
      if (res2.status === 0) {
        Message.success("成功");
      }
    },
    sureClick: function () {
      //   this.$router.go(-1);
      // var tag_idsStr='';
      // for(var i=0; i < this.tagsParams.tag_ids.length;i ++){
      //     tag_idsStr+= this.tagsParams.tags_id[i];
      //     if(i!=this.tagsParams.tag_ids.length-1){
      //         tag_idsStr+=','
      //     }
      // }
    
      this.tagsParams.tag_ids = this.tagsParams.tag_ids.toString();
    //   console.log(this.tagsParams.tag_ids);
      this.created2();
      this.$router.go(-1);
    },
    tagSelect: function (name, id) {
      this.tagsParams.tag_ids.push(id);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.created1();
    this.created2();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' >
.container {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;
  background-color: #f1f2f9;
  .content-box {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 30px;
    .back-box {
      width: 100%;
      height: auto;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        display: flex;
        align-items: center;

        img {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }
      .btn-back:hover {
        color: #409eff;
      }
      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    .select-box {
      display: flex;
      align-items: center;
      .span {
        width: 188px;
        padding-right: 12px;
        text-align: right;
      }
      .link {
        margin-left: 15px;
        color: #409eff;
        cursor: pointer;
      }
    }
  }
}
</style>